<template>
    <div id="StackedLineChart" ref="chartDom"></div>
</template>

<script setup>
import { ref } from 'vue';
const chartDom = ref(0)
const option = {
    // 放在这个节点 设置 全局字体
    // textStyle: {
    //     fontFamily: 'Dosis'
    // },
    title: {
        text: document.body.clientWidth < 768 ? null : 'week ’s data',
    },
    // 布局
    grid: {
        left: '3%',
        right: '4%',
        bottom: '0%',
        containLabel: true
    },
    // 提示框
    tooltip: {
        trigger: 'axis',
        // 降序排列
        order: 'valueDesc'
    },
    legend: {
        data: []
    },
    xAxis: {
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        // type: 'value'
    },
    series: []
}
$api.getChartsWeek().then((res) => {
    option.legend.data = res.legend
    option.series = res.datas
    // 渲染DOM
    const CHART = $echarts.init(chartDom.value)
    CHART.setOption(option)
})

</script>

<style lang='less' scoped>
#StackedLineChart {
    flex: 1;
}
</style>
